<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摆渡村-壁纸-首页</title>
    <link rel="stylesheet" th:href="@{/css/menu.css}">
    <link rel="stylesheet" th:href="@{/css/upload.css}">
    <script rel="script" th:src="@{/js/vue.js}"></script>
    <style>
        ::-webkit-scrollbar {display:none}
    </style>
</head>
<body>
<div id="app">

    <div class="nav">
        <div class="brand">
            <div class="brand-title">后台壁纸管理</div>
        </div>
        <div class="menu">
            <ul>
                <li><a th:href="@{/upload}">上传</a></li>
                <li><a th:href="@{/view}">壁纸</a></li>
                <li><a th:href="@{/type}">类型</a></li>
            </ul>
        </div>
        <div class="user">
            <div class="user-login">摆渡人</div>
        </div>
    </div>

    <div class="upload" style="margin-top: 100px;">
        <div class="upload-context">
            <div class="title">
                <h2>上传壁纸</h2>
                <h5 style="color: red;margin-top: 10px;" th:text="${msg}"></h5>
            </div>
            <form method="post" style="margin-top: 30px;" enctype="multipart/form-data" th:action="@{/upload}">
                <div class="operation">
                    <div class="upload-control" v-on:click="open()">
                        <input id="fileUpload" type="file" name="file" v-on:change="flush(this)">
                        <div class="name">选择文件</div>
                    </div>
                    <div class="input-control" style="margin-left: 20px;" v-show="display.upBtn">
                        <label>
                            <select name="typeId">
                                <option th:each="type: ${types}" th:value="${type.wallTypeId}" th:text="${type.wallTypeName}"></option>
                            </select>
                        </label>
                    </div>
                    <div class="input-control" style="margin-left: 20px;" v-show="display.upBtn">
                        <input type="text" name="price" placeholder="价格">
                    </div>
                    <div class="input-control" style="margin-left: 20px;" v-show="display.upBtn">
                        <input type="submit" value="上传">
                    </div>
                </div>

                <div class="image-control" style="margin-top: 20px;">
                    <img id="imageShow" th:src="@{/img/nuller.png}" alt="show">
                </div>

                <div class="operation">
                    <div class="massage">
                        <span id="filename"></span>
                        <span id="suffix"></span>
                        <span id="size"></span>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script type="application/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            display: {
                upBtn: false
            }
        },
        methods: {
            open:function(){
                document.getElementById("fileUpload").click();
            },
            getObjectURL:function(file) {
                let url = null ;
                if (window.createObjectURL !== undefined) {
                    url = window.createObjectURL(file) ;
                } else if (window.URL !== undefined) {
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL !== undefined) {
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
            },
            flush:function () {
                let fileUpload = document.getElementById("fileUpload");
                if (fileUpload.files[0] !== undefined) {
                    this.display.upBtn = true;
                    let filename = fileUpload.files[0].name;
                    let index = filename.lastIndexOf('.');
                    let name = filename.substr(0,index);
                    let suffix = filename.substr(index+1);
                    document.getElementById("filename").innerText = name.substr(0,30).replace(' ',"");
                    document.getElementById("suffix").innerText = suffix.toUpperCase();
                    document.getElementById("size").innerText = this.renderSize(fileUpload.files[0].size);
                    let imgPath = this.getObjectURL(fileUpload.files[0]);
                    let imageShow = document.getElementById("imageShow");
                    imageShow.setAttribute("src",imgPath);
                }
            },
            renderSize:function(value){
                if(null === value||value === ''){
                    return "0 Bytes";
                }
                let unitArr = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];
                let index=0;
                let resize = parseFloat(value);
                index=Math.floor(Math.log(resize)/Math.log(1024));
                let size =resize/Math.pow(1024,index);
                size=size.toFixed(2);//保留的小数位数
                return size+unitArr[index];
            }
        }
    });
</script>
</body>
</html>